import { LeftLabelComponentType, ComponentInfoType } from './storeTypes';
import uuid from '../utils/uuid';
import { Input, InputNumber, Slider, Select, Radio } from 'ant-design-vue';

const fontFamilyList = [
  // { label: '', value: '无' },
  { label: '宋体', value: '"SimSun", "STSong"' },
  { label: '黑体', value: '"SimHei", "STHeiti"' },
  { label: '楷体', value: '"KaiTi", "STKaiti"' },
  { label: '仿宋', value: '"FangSong", "STFangsong"' }
];
function generateVNode(list: typeof fontFamilyList) {
  return list
    .filter((f) => f)
    .map(({ value, label }) => ({
      value,
      // label: h('span', { style: { fontFamily: value } }, label)
      label: <span style={{ fontFamily: value }}>{label}</span>
    }));
}

export const editorCompnoent: ComponentInfoType = {
  text: {
    component: Input,
    componentStyle: { flex: 1 },
    label: '文本内容',
    after: (e: KeyboardEvent) => (e.target as HTMLInputElement).value
  },
  color: {
    component: 'template-color',
    valueAlias: 'color',
    label: '颜色',
    eventName: 'input',
    after: (e: Event) => (e.target as HTMLInputElement).value
  },
  fontSize: {
    component: InputNumber,
    label: '字体大小',
    before: (v: string) => parseFloat(v),
    after: (res: number) => `${res}px`
  },
  lineHeight: {
    component: Slider,
    componentStyle: { flex: 1 },
    label: '行高',
    extraProps: { min: 0, max: 3, step: 0.1 },
    before: (v: string) => parseFloat(v)
  },
  textAlign: {
    component: Radio.Group,
    extraProps: { buttonStyle: 'solid' },
    subComponent: Radio.Button,
    subComponentProps: {
      options: [
        { value: 'left', label: 'left' },
        { value: 'center', label: 'center' },
        { value: 'right', label: 'right' }
      ]
    },
    label: '文本对齐',
    after: (e: Event) => (e.target as HTMLSelectElement).value
  },
  fontFamily: {
    component: Select,
    subComponent: Select.Option,
    subComponentProps: {
      /* template use a-select-option */
      // options: generateVNode(fontFamilyList)
      /* jsx */
      // options: fontFamilyList
    },
    label: '字体样式',
    extraProps: {
      /* template use options */
      options: generateVNode(fontFamilyList)
    }
  }
};

const style = {
  textAlign: 'left',
  color: '#000000',
  fontSize: '14px',
  lineHeight: '1.5',
  fontFamily: 'sans-serif'
};
export const defaultLabelComponentList: LeftLabelComponentType[] = [
  {
    id: uuid(),
    name: 'template-text',
    props: {
      tag: 'a',
      text: '超链接',
      attr: { href: '#/template-editor' },
      style
    }
  },
  {
    id: uuid(),
    name: 'template-text',
    props: {
      tag: 'button',
      text: '按钮',
      style
    }
  },
  {
    id: uuid(),
    name: 'template-text',
    props: {
      tag: 'h3',
      text: '标题文本',
      style
    }
  }
];
